import React, { useMemo, useState } from 'react'
import { Radio, ProductCard, Checkbox, SubmitBar, Stepper } from 'react-vant';
import '../App.css'

export default function Car() {

  //数据
  let shoplist = [
    { id: 1, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 2, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 3, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 4, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 5, title: '国产车里子', price: '42.9', typeId: 1, checked: true, isCart: true, img: '/img/下载1.jpg', num: 1 },
    { id: 6, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 7, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 8, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 9, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 10, title: '国产大菠萝', price: '42.9', typeId: 2, checked: true, isCart: true, img: '/img/下载2.jpg', num: 1 },
    { id: 11, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 12, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 13, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 14, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 15, title: '国产大草莓', price: '42.9', typeId: 3, checked: true, isCart: true, img: '/img/下载3.jpg', num: 1 },
    { id: 16, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 17, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 18, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 19, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 20, title: '国产大西瓜', price: '42.9', typeId: 4, checked: true, isCart: true, img: '/img/下载4.jpg', num: 1 },
    { id: 21, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 22, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 23, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 24, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
    { id: 25, title: '其他水果', price: '42.9', typeId: 5, checked: true, isCart: true, img: '/img/下载5.jpg', num: 1 },
  ]

  //全选计算属性
  let isAll = useMemo(() => {
    return shoplist.every(item => {
      return item.checked
    })
  }, [shoplist])

  const changeNum = (id, num){
    shoplist.filter(item => {
      if (item.id == id) {
        return num + 1
      }
    })
  }



  /* //选中的合计
   get sedTotal() {
   return this.context.list.reduce((p, n) => {
     if (n.sed) {
       return p + n.price * n.num * 1
     }
     return p
   }, 0)
 } */

  const [value9, setValue9] = useState(0)

  return (
    <div>
      {/* 渲染数据 */}
      <div className='box'>
        {
          shoplist.map(item => {
            return (
              <div key={item.id} >
                <ProductCard
                  num={<>
                    <Stepper
                      min={0}
                      value={value9}
                      onChange={v => {
                        setValue9(v)
                      }}
                    />
                  </>}
                  price={item.price}
                  desc="描述信息"
                  title={item.title}
                  thumb={<div style={{ display: 'flex', alignItems: 'center' }}>
                    <div>
                      <Checkbox checked={item.checked} onChange={() => { }} />
                    </div>
                    <div style={{ margin: '0 10px', objectFit: 'cover' }} >
                      <img src={item.img} alt="" height={80} width={60} />
                    </div>
                  </div>}
                />
              </div>
            )
          })
        }
      </div>


      <div className="demo-submit-bar">
        <SubmitBar
          price="3050"
          buttonText="提交订单"
        >
          <Checkbox checked={isAll} onChange={() => {

          }}>全选</Checkbox>
        </SubmitBar>
      </div>
    </div>
  )
}
